<template>
    <div class="section-wrap formwork">
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目名称</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.ProjectName}}
                </div>
            </div>

            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>拆除部位</label>
                </div>
                <div>
                    <div class="despart">{{dataList.DismantlingPart}}</div>
                </div>
            </div>

            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>标高范围</label>
                </div>
                <div>
                    <div class="despart">{{dataList.remark}}</div>
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>作业开始日期</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.StartDate | filterdata}}
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>作业结束日期</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.EndDate | filterdata}}
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>混凝土养护是否合格</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': spot}">
                        合格
                    </div>
                    <div :class="{'active': !spot}">
                        不合格
                    </div>
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>同条件混凝土试块试压强度</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': spot2}">
                        合格
                    </div>
                    <div :class="{'active': !spot2}">
                        不合格
                    </div>
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>混凝土强度</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': spot3}">
                        合格
                    </div>
                    <div :class="{'active': !spot3}">
                        不合格
                    </div>
                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="saveFiretit">
                安全措施
            </div>

            <div class="saveChecklist"
                 v-for="(checkOne,index) in commonList"
                 :key="index">
                <input class="saveCheckInp"
                       type="checkbox"
                       disabled="false"
                       :class="{'checkedopt': checkStatusList.indexOf(checkOne)>=0}"
                       :checked="checkStatusList.indexOf(checkOne)>=0"
                       @click='checkedOne(checkOne)'>
                <span>{{checkOne}}</span>
            </div>

            <!-- <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>审批意见</label>
                </div>
                <div>
                    <textarea class="areainfo"
                              v-model="dataList.ApproveRemark"
                              :disabled="isDisable"></textarea>
                </div>
            </div> -->
            <!--
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>审批人</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.ApplyPerson}}
                </div>
            </div> -->

            <!-- 审批信息 -->
            <div class="approveBox"
                 v-if='approveStatus'>
                <div class="approveTit">审批信息</div>
                <div class="approveWrap"
                     v-if='dataList.ApproveInfo.length>0'
                     v-for="(item,index) in dataList.ApproveInfo"
                     :key="index">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <!-- <textarea class="areainfo"
                                      height="500"
                                      placeholder="请输入审批意见"
                                      v-model="item.Remark"
                                      :disabled="isDisable"></textarea> -->
                            <p class="textarea">{{item.Remark}}</p>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApproveResult}}
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApprovePersonName}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-item form-item-style2"
                 v-if="syself||mStatus==2">
                <div class="label-title">
                    <label>监控意见</label>
                </div>
                <div v-if="mStatus==1">
                    <x-textarea :placeholder="('请输入意见(自行换行)')"
                                :max="2000"
                                :height="60"
                                v-model="jkdata.MonitoringRemark"></x-textarea>
                </div>
                <div v-if="mStatus==2">
                    <!-- <x-textarea :height="60"
                                disabled
                                v-model="dataList.MonitoringRemark"></x-textarea> -->
                    <p class="textarea">{{dataList.MonitoringRemark}}</p>
                </div>
            </div>

            <!-- <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <label>监控照片</label>
                    <span>当前共{{detailData.ProblemImgs&&detailData.ProblemImgs.length>0?detailData.ProblemImgs.length:uploadLength}}张照片</span>
                </div>
                <div class="upload-wrap">
                    <upload v-if="detailData.ProblemImgs&&detailData.ProblemImgs.length>0"
                            :imgList="detailData.ProblemImgs"
                            key="1"></upload>
                    <upload v-else
                            @setFormData="setFormData"
                            key="2"></upload>
                </div>
            </div> -->
            <div class="showstyleBox">
                <div class="showstyle"
                     v-if="syself&&mStatus==1">
                    <div class="newqqq">
                        <div class="space-between">
                            <label>监控图片</label>

                        </div>
                        <span>当前共{{uploadLength}}张照片</span>
                    </div>
                    <div class="upload-wrap">
                        <upload @setFormData="setFormData"></upload>
                    </div>
                </div>
                <div class="showstyle"
                     v-if="mStatus==2">
                    <div class="newqqq">
                        <div class="space-between">
                            <label>监控图片</label>
                        </div>
                        <span>当前共{{dataList.MonitoringPath.length}}张照片</span>
                    </div>
                    <div class="upload-wrap">
                        <upload v-if="dataList.MonitoringPath&&dataList.MonitoringPath.length>0"
                                :imgList="dataList.MonitoringPath"></upload>
                        <strong v-else
                                class="no-img">暂无图片</strong>
                    </div>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="syself&&mStatus==1">
                <div class="label-title">
                    <label>监控人员</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{jkdata.MonitoringPeople}}
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="mStatus==2">
                <div class="label-title">
                    <label>监控人员</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{jkdata.MonitoringPeople}}
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="syself&&mStatus==1">
                <div class="label-title">
                    <label>监控时间</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{monitortime}}
                </div>
            </div>

            <div class="btns"
                 v-if="syself&&mStatus==1">
                <button @click="toSubmit">提交</button>
            </div>
        </div>

        <myMenu></myMenu>
    </div>
</template>
<script>
import myMenu from '@/commonComponents/menu'
import upload from '@/commonComponents/upload/index'
export default {
    components: {
        upload,
        myMenu
    },
    data () {
        return {
            dataList: {
                ProjectName: '', // 项目名称
                DeptName: '', // 申请单位名称
                StartDate: this.getDate(), // 动火开始日期
                EndDate: this.getDate(), // 动火结束日期
                DismantlingPart: '', // 拆除部位
                remark: '', // 标高范围
                PlanText: '', // 安全措施选择集合（字符串）
                ApproveRemark: '', // 审批意见
                MonitoringPath: [],
                // ApplyPerson: '',//审批人
                MonitoringRemark: ''// 监控意见
            },
            isDisable: true,
            spot: true, // 混凝土是否合格
            spot2: true,
            spot3: true,
            commonList: ['动火方案', '配备灭火器', '明确动火监护人', '动火点周围可燃材料已清理', '动火人配备安全防护用品(如防护罩、防护手套等）', '是否动火旁站监督'], // 安全措施列表
            checkStatusList: [], // 已选安全措施集合
            role: '', // 检查单位
            detailData: {
            },
            jkdata: {
                id: '', //	String	否	起重吊装作业ID
                Monitoring: 'true', //	boolean	否	是否监控
                MonitoringPeople: '', //	String	否	监控人员
                MonitoringPath: '', //	String	否	监控图片
                MonitoringRemark: '', //	String	否	监控意见
                CheckResult: true
            },
            monitortime: this.getDate(),
            formData: '',
            images: [],
            uploadLength: 0,
            mStatus: '',
            userId: '',
            tokenId: '',
            projectId: '',
            userInfo: '',
            syself: '',
            addFlag: true, // 提交开关（避免多次提交）
            approveStatus: false// 是否展示审批信息
        }
    },
    created () {
        this.mStatus = this.$route.query.mStatus
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.projectId = this.userInfo.deptid
        this.role = this.userInfo.departsir
        this.jkdata.MonitoringPeople = this.userInfo.username
        this.jkdata.id = this.$route.query.id
        // this.syself = this.rolecheck()
        this.getData()
    },
    filters: {
        filterdata (val) {
            if (!val) {
                return false
            }
            return val.substring(0, 10)
        }
    },
    methods: {
        rolecheck () {
            // index==1  验证是否是项目施工员  index==2  验证是否是设备管理员
            let arr = []
            let flag = false
            arr = this.userInfo.usermode.split(',')
            arr.forEach(
                (item, index) => {
                    if (item == '项目安全员') {
                        flag = true
                    }
                }
            )
            return flag
        },
        // 获取详情数据
        getData () {
            let that = this
            let param = {
                'allowPaging': true,
                'business': 'GetTemplateDismantlingJob',
                'data': {
                    'id': this.$route.query.id
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': 'CD9D3B5786AF0333B02C53F1A84C45B6',
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    // console.log(res)
                    that.dataList = res.data.data
                    that.checkStatusList = that.dataList.PlanText.split(',')
                    that.spot = that.toBool(res.data.data.JobItem1)
                    that.spot2 = that.toBool(res.data.data.JobItem2)
                    that.spot3 = that.toBool(res.data.data.JobItem3)

                    that.syself = res.data.data.CanEdit
                    if (that.syself || res.data.data.ApproveInfo.length > 0) {
                        that.approveStatus = true
                    }
                }
            ).catch(response => {

            })
        },
        setFormData (formData, uploadLength, images) {
            this.formData = formData
            this.uploadLength = uploadLength
            this.images = images
        },
        // 获取当前年月日时分
        getDate () {
            let nowDate = new Date()
            let date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
                hour: nowDate.getHours(),
                minute: nowDate.getMinutes()
            }
            if (date.month >= 0 && date.month < 10) {
                date.month = '0' + date.month
            }
            if (date.date >= 0 && date.date < 10) {
                date.date = '0' + date.date
            }
            if (date.hour >= 0 && date.hour < 10) {
                date.hour = '0' + date.hour
            }
            if (date.minute >= 0 && date.minute < 10) {
                date.minute = '0' + date.minute
            }
            let systemDate = date.year + '-' + date.month + '-' + date.date + '\xa0\xa0\xa0' + date.hour + ':' + date.minute
            return systemDate || ''
        },
        // 提交
        toSubmit () {
            if (!this.addFlag) {
                return false
            }
            this.addFlag = false
            this.$vux.loading.show({
                text: '正在提交中...'
            })
            let param = {
                'allowPaging': true,
                'business': 'TemplateDismantlingCheck',
                'data': this.jkdata,
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param, this.formData
            ).then(
                (res) => {
                    // console.log(res)
                    if (res.data.code == 0) {
                        this.$vux.toast.text('监控提交成功')
                        // this.$router.push({
                        //     path: '/workrisk'
                        // })
                        this.$router.go(-1)
                    } else {
                        this.$vux.toast.text(res.data.info)
                        this.addFlag = true
                    }
                }
            ).catch(() => {
                this.addFlag = true
            })
        },
        // 安全措施多选
        checkedOne (val) {
            var idIndex = this.checkStatusList.indexOf(val)
            if (idIndex >= 0) {
                this.checkStatusList.splice(idIndex, 1)
            } else {
                this.checkStatusList.push(val)
            }
        },
        // 字符串转化
        toStr (val) {
            if (val == true) {
                return '是'
            } else if (val == false) {
                return '否'
            } else {
                return '是'
            }
        },
        toBool (val) {
            if (val == '是') {
                return true
            } else if (val == '否') {
                return false
            } else {
                return true
            }
        }
    }
}
</script>
<style lang="less" scoped>
.right-select {
    font-size: 14px;
    color: #999;
}
.right-select > i {
    color: #999;
}
.btns .green {
    // background: #15bc84;
}
.newcompanyList {
    font-size: 14px;
    text-align: right;
    color: #999;
}
.saveFiretit {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #efeff4;
    margin-left: 20px;
    color: #2269ff;
    font-size: 15px;
}
.saveChecklist {
    height: 55px;
    line-height: 55px;
    font-size: 13px;
    margin-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #efeff4;
}
.saveCheckInp {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 9px;
    background: #fff url('../../../assets/hideManage/uncheckedicon.jpg')
        no-repeat 0 0;
    background-size: 15px 15px;
}
.saveCheckInp.checkedopt {
    background: #fff url('../../../assets/hideManage/checkedicon.jpg') no-repeat
        0 0;
    background-size: 15px 15px;
}
.select-section {
    display: flex;
    display: -webkit-flex;
    font-size: 14px;
}
.select-section div {
    padding-left: 26px;
    background: url(../../../../static/images/select.png) no-repeat left center;
    background-size: 17px 17px;
}
.select-section div:first-child {
    margin-right: 38px;
}
.select-section .active {
    background: url(../../../../static/images/selected.png) no-repeat left
        center;
    background-size: 17px 17px;
}
.formwork .form-item label {
    // width: 170px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.formwork .despart {
    font-size: 14px;
    color: #999;
    padding: 12px 20px 12px 0;
}
.showstyleBox {
    background-color: #fff;
}
.showstyle {
    padding: 20px 20px 0 0;
    margin-left: 20px;
    font-size: 14px;
    border-bottom: 1px solid #ebeef3;
}
.showstyle label,
.showstyle span {
    color: #666;
}
.newqqq {
    display: flex;
    justify-content: space-between;
}
.upload-wrap {
    border-bottom: 1px solid #ebeef3;
}
.imgshow {
    padding: 20px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
}
.imgshow > img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>
<style>
.formwork .vux-cell-value {
    color: #999;
}
.formwork .vux-x-textarea {
    width: 100%;
    border: 0 !important;
}
.formwork .form-item .textarea,
.formwork .form-item textarea {
    font-size: 14px;
    color: #999;
    font-family: '微软雅黑';
}
.formwork .areainfo {
    resize: none;
}
.formwork .upload-wrap .upload-item {
    margin-right: 26px;
    margin-bottom: 20px;
}
.approveBox {
    border-top: 10px solid #ebeef2;
}
.approveBox .approveTit {
    height: 55px;
    line-height: 55px;
    margin-left: 20px;
    font-size: 15px;
    color: #2269ff;
    border-bottom: 1px solid #efeff4;
}
.approveBox .approveWrap {
    border-bottom: 5px solid #ebeef2;
}
.approveBox .approveWrap:last-child {
    /* border: none; */
}
</style>
